<template>
  <div id="settings">
    <HeaderBg>
      <Headers :title="$t('settings.title')"/>
    </HeaderBg>
    <div class="lists">
      <ul>
        <li v-for="(item,index) in listItems" :key="index">
          <router-link :to="item.url">
            <div class="list-names">
              <div class="list-title">{{item.text}}</div>
            </div>
            <div class="more-icon">
              <img :src="item.moreIcon" alt>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import HeaderBg from "components/HeaderBg";
export default {
  name: "settings",
  data() {
    return {
      listItems: [
        {
          moreIcon: require("assets/more_icon.png"),
          text: this.$t("settings.changePwd"),
          url: "/changePwd"
        },
        {
          moreIcon: require("assets/more_icon.png"),
          text: this.$t("settings.exprotSY"),
          url: "/exportSy"
        },
        {
          moreIcon: require("assets/more_icon.png"),
          text: this.$t("settings.languageSet"),
          url: "/language"
        },
        {
          moreIcon: require("assets/more_icon.png"),
          text: this.$t("settings.about_us"),
          url: "/about_us"
        }
      ]
    };
  },
  components: {
    HeaderBg
  }
};
</script>

<style lang="stylus" scoped>
@import '../../../../utils/styl/mixin.styl'
#settings
  positCenter(0, 0, 0, 0, 0, 0)
  width 100%
  background-color $bodyBg
  .lists
    margin-top rem(130)
    ul
      width 100%
      box-sizing border-box
      padding-left rem(20)
      li
        width 100%
        line-height rem(40)
        background-color $listBg
        margin-bottom rem(9)
        border-top-left-radius rem(28)
        border-bottom-left-radius rem(28)
        a
          color $fontColor
          display flex
          justify-content space-between
          align-items center
          width 100%
          .list-names
            margin-left rem(5)
            display flex
            justify-content flex-start
            align-items center
            width 100%
            .list-title
              margin-left rem(21)
              font-size rem(15)
          .more-icon
            width rem(20)
            height rem(10)
            margin-right rem(20)
            img
              display block
              width 100%
              height 100%
              object-fit contain
</style>
